<!-- Regions -->
<template>
  <div class="regions">
    <div class="regions-wrap" v-loading="loading">
      <div class="regions-list" v-for="(item, index) in areaList " :key="item.id">
        <el-checkbox size="medium" v-model="item.checked" @change="handleItemCheck(item)">{{item.name}}</el-checkbox>
        <span class="open-icon" @click="handleOpenChild(item, index)"><i :class="['el-icon-arrow-down', {'up-down': item.childOpen}]"></i></span>

        <template v-if="item.childOpen">
          <div class="regions-lists" v-for="(items, indexs) in item.children " :key="items.id">
            <el-checkbox size="small" v-model="items.checked" @change="handleItemCheck(items, item)">{{items.name}}</el-checkbox>
            <span class="open-icon" @click="handleOpenChild(items, index, indexs )"><i :class="['el-icon-arrow-down', {'up-down': items.childOpen}]"></i></span>

            <template v-if="items.childOpen">
              <div class="regions-lists" v-for="(itemss, indexss) in items.children " :key="itemss.id">
                <el-checkbox size="mini" v-model="itemss.checked" @change="handleItemCheck(itemss, items, item)">{{itemss.name}}</el-checkbox>
                <span class="open-icon" @click="handleOpenChild(itemss, index, indexs, indexss)"><i :class="['el-icon-arrow-down', {'up-down': itemss.childOpen}]"></i></span>

                <template v-if="itemss.childOpen">
                  <div class="regions-lists" v-for="itemsss in itemss.children " :key="itemsss.id">
                    <el-checkbox size="mini" v-model="itemsss.checked" @change="handleItemCheck(itemsss, itemss, items, item)">{{itemsss.name}}</el-checkbox>
                  </div>
                </template>
              </div>
            </template>

          </div>
        </template>

      </div>
    </div>
    <div class="check-all">
      <el-checkbox v-model="allChecked" @change="handleAllCheck">全选</el-checkbox>
      <el-button type="primary" size="medium" :disabled="checkList.length <= 0" @click="handleSub">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { GetCommonRegions } from '@/api/onlineMan'
export default {
  name: 'regions',
  components: {},
  data () {
    return {
      loading: false,
      allChecked: false,
      subDisabled: true,
      areaList: [],
      checkList: []
    }
  },
  props: {
    limit: {
      type: Number,
      default: NaN
    }
  },
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      this.getData().then(data => {
        this.loading = false
        this.areaList = data
      }).catch(e => {
        this.loading = false
      })
    },
    getData (parentCode) {
      return new Promise((resolve, reject) => {
        const params = { parentCode: parentCode || '1' }
        GetCommonRegions(params).then(res => {
          let dataList = res.data
          dataList.forEach(e => {
            e.checked = false
            e.childOpen = false
          })
          resolve(dataList)
        }).catch(e => {
          reject(e)
        })
      })
    },
    handleOpenChild (val, index, index2, index3) {
      const isOpenChild = val.childOpen
      if (!isOpenChild) {
        if (!val.children) {
          this.loading = true
          this.getData(val.code).then(res => {
            this.loading = false
            val.children = res
          }).catch(e => {
            this.loading = false
            this.$message.error('获取地区数据失败！')
          })
        }
        this.$nextTick(() => {
          val.childOpen = true
          if (index) {
            this.$set(this.areaList[index], index, val)
          }
          if (index2) {
            this.$set(this.areaList[index].children[index2], index2, val)
          }
          if (index3) {
            this.$set(this.areaList[index].children[index2].children[index3], index3, val)
          }
        })
      } else {
        this.$nextTick(() => {
          val.childOpen = false
          if (index) {
            this.$set(this.areaList[index], index, val)
          }
          if (index2) {
            this.$set(this.areaList[index].children[index2], index2, val)
          }
          if (index3) {
            this.$set(this.areaList[index].children[index2].children[index3], index3, val)
          }
        })
      }
    },
    handleItemCheck (val1, val2, val3, val4) {
      if (val1.checked) {
        let data = val1
        if (val2) {
          data.name2 = val2.name
          data.code2 = val2.code
        }
        if (val3) {
          data.name3 = val3.name
          data.code3 = val3.code
        }
        if (val4) {
          data.name4 = val4.name
          data.code4 = val4.code
        }
        if (this.limit === 1) {
          this.checkList = []
          this.areaList.forEach(item => {
            item.checked = false
            if (item.children) {
              item.children.forEach(i => {
                i.checked = false
                if (i.children) {
                  i.children.forEach(e => {
                    e.checked = false
                    if (e.children) {
                      e.children.forEach(g => {
                        g.checked = false
                      })
                    }
                  })
                }
              })
            }
          })
          val1.checked = true
          this.checkList.push(data)
        } else {
          this.checkList.push(data) // 当前选中添加上
          // 关联下级选中
          if (val1.children) {
            val1.children.forEach(e => {
              e.checked = true
              let infoData = e
              infoData.name2 = val1.name
              infoData.code2 = val1.code
              this.checkList.push(infoData)
              if (e.children) {
                e.children.forEach(i => {
                  i.checked = true
                  let infoData2 = i
                  infoData2.name2 = e.name
                  infoData2.code2 = e.code
                  infoData2.name3 = val1.name
                  infoData2.code3 = val1.code
                  this.checkList.push(infoData2)
                  if (i.children) {
                    i.children.forEach(g => {
                      g.checked = true
                      let infoData3 = g
                      infoData3.name2 = i.name
                      infoData3.code2 = i.code
                      infoData3.name3 = e.name
                      infoData3.code3 = e.code
                      infoData3.name4 = val1.name
                      infoData3.code4 = val1.code
                      this.checkList.push(infoData3)
                    })
                  }
                })
              }
            })
          }
        }
      } else {
        // // 当前选中的移出
        this.checkList.forEach((e, $index) => {
          if (e.id === val1.id) {
            this.checkList.splice($index, 1)
          }
        })
        // 关联下级取消选中 数据移出
        if (val1.children) {
          val1.children.forEach(e => {
            e.checked = false

            this.checkList.forEach((ele, $index) => {
              if (ele.id === e.id) {
                this.checkList.splice($index, 1)
              }
            })

            if (e.children) {
              e.children.forEach(i => {
                i.checked = false
                this.checkList.forEach((ele, $index) => {
                  if (i.id === e.id) {
                    this.checkList.splice($index, 1)
                  }
                })
                if (i.children) {
                  i.children.forEach(g => {
                    g.checked = false
                    this.checkList.forEach((ele, $index) => {
                      if (g.id === e.id) {
                        this.checkList.splice($index, 1)
                      }
                    })
                  })
                }
              })
            }
          })
        }
      }
    },
    handleAllCheck (val) {
      if (val) {
        this.checkList = []
        this.areaList.forEach(e => {
          e.checked = true
          this.checkList.push(e)
          if (e.children) {
            e.children.forEach(i => {
              i.checked = true
              i.name2 = e.name
              i.code2 = e.code
              this.checkList.push(i)

              if (i.children) {
                i.children.forEach(g => {
                  g.checked = true
                  g.name2 = i.name
                  g.code2 = i.code

                  g.name3 = e.name
                  g.code3 = e.code
                  this.checkList.push(g)

                  if (g.children) {
                    g.children.forEach(k => {
                      k.name2 = g.name
                      k.code2 = g.code

                      k.name3 = i.name
                      k.code3 = i.code

                      k.name4 = e.name
                      k.code4 = e.code
                      k.checked = true
                      this.checkList.push(k)
                    })
                  }
                })
              }
            })
          }
        })
      } else {
        this.areaList.forEach(e => {
          e.checked = false
          if (e.children) {
            e.children.forEach(i => {
              i.checked = false

              if (i.children) {
                i.children.forEach(g => {
                  g.checked = false
                  if (g.children) {
                    g.children.forEach(k => {
                      k.checked = false
                    })
                  }
                })
              }
            })
          }
        })
        this.checkList = []
      }
    },
    handleSub () {
      let data = {
        limit: this.limit,
        list: []
      }
      this.checkList.forEach(item => {
        let info = {
          name: item.name,
          code: item.code
        }

        if (item.code2) {
          info.code2 = item.code2
          info.name2 = item.name2
        }
        if (item.code3) {
          info.code3 = item.code3
          info.name3 = item.name3
        }
        if (item.code4) {
          info.code4 = item.code4
          info.name4 = item.name4
        }
        data.list.push(info)
      })
      this.$emit('getData', data)
    }
  }
}

</script>
<style lang='scss' scoped>
.regions {
  .regions-wrap {
    overflow: hidden;
    min-height: 300px;
  }
  .regions-list {
    width: 200px;
    margin-top: 20px;
    margin-right: 10px;
    box-sizing: border-box;
    float: left;
    max-height: 500px;
    overflow: hidden;
    overflow-y: scroll;
    .open-icon {
      margin-left: 5px;
      cursor: pointer;
      i {
        transition: all 0.2s ease-in-out;
      }
    }
    .up-down {
      transform: rotate(180deg);
    }
    .regions-lists {
      padding: 0 10px;
      box-sizing: border-box;
      margin: 10px 0;
    }
  }
  .check-all {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
}
</style>
